---
/**
 * Every individual entry — posts and photo sets alike.
 *
 * A photo set gets its grid rendered from frontmatter before the body, so a
 * set with nothing but a caption still works; the MDX body is then whatever
 * story you want to tell around it. A post is just the body.
 */
import { render } from 'astro:content';
import Entry from '@eratic/core/layouts/Entry.astro';
import PhotoGrid from '@eratic/core/components/PhotoGrid.astro';
import Figure from '@eratic/core/components/Figure.astro';
import { mdxComponents } from '@eratic/core/components/mdx';
import { readingTime } from '@eratic/core';
import { allEntries, entryPath, entryKicker } from '../lib/entries';

export async function getStaticPaths() {
	const entries = await allEntries();
	return entries.map((entry) => ({
		params: { slug: entry.id },
		props: { entry },
	}));
}

const { entry } = Astro.props;
const { Content } = await render(entry);

const kicker =
	entry.kind === 'photos' ? entryKicker(entry) : readingTime(entry.body ?? entry.data.summary);
---

<Entry
	site="blog"
	title={entry.data.title}
	summary={entry.data.summary}
	path={entryPath(entry)}
	pubDate={entry.data.pubDate}
	updatedDate={entry.data.updatedDate}
	tags={entry.data.tags}
	canvas={entry.data.canvas}
	theme={entry.data.theme}
	image={entry.kind === 'photos' ? undefined : entry.data.cover?.src}
	kicker={kicker}
>
	{
		entry.kind === 'post' && entry.data.cover && entry.data.showCover && (
			<Figure
				src={entry.data.cover}
				alt={entry.data.coverAlt ?? entry.data.title}
				width="wide"
				priority
			/>
		)
	}

	{
		entry.kind === 'photos' && (
			<PhotoGrid
				photos={entry.data.photos}
				columns={entry.data.columns}
				exif={entry.data.exif}
				width="wide"
			/>
		)
	}

	<Content components={mdxComponents} />
</Entry>